<template>
	<view class="content">
		<view class="sx-content"><view class="sx-btn" @click="sShow = true">筛选</view></view>
		<view class="search-table student-plan">
			<sib-list ref="sibList" @scrolltolowerFn="scrolltolowerFn" :scrollHeight="'100vh'">
				<!-- 内部block可自定义 -->
				<block class="" slot="sibScrollList">
					<view class="table-scroll">
					<view class="table">
						<u-table>
							<u-tr class="table-head">
								<u-th><view class="th">院校代码</view></u-th>
								<u-th><view class="th">录取批次</view></u-th>
								<u-th><view class="search-th th">院校名称</view></u-th>
								<u-th><view class="th">院校所在地</view></u-th>
								<u-th><view class="th">专业代码</view></u-th>
								<u-th><view class="th">专业名称</view></u-th>
								<u-th><view class="th">学制</view></u-th>
								<u-th><view class="th">计划数</view></u-th>
								<u-th><view class="th">学费</view></u-th>
								<u-th><view class="th">备注</view></u-th>
							</u-tr>
							<u-tr v-for="(item,i) in sList" :key="i">
								<u-td>{{item.school_code}}</u-td>
								<u-td>{{item.batch_type_str}}</u-td>
								<u-td><view class="search-href" @click="goto('../pages/universityDetail', item)">{{item.school_title}}</view></u-td>
								<u-td>{{item.school_data.city_str}}</u-td>
								<u-td>{{item.major_code}}</u-td>
								<u-td>{{item.major_title}}</u-td>
								<u-td>{{item.schooling_len}}</u-td>
								<u-td>{{item.enroll_plan_count}}</u-td>
								<u-td>{{item.school_fee}}</u-td>
								<u-td>{{item.desc}}</u-td>
							</u-tr>
						</u-table>
					</view>
					</view>
				</block>
			</sib-list>
		</view>
		
		<u-popup v-model="sShow" mode="right" width="80%">
			<view class="search-type">
				<view class="item"><text class="label">招生年度：</text> <view class="select" @click="objShow.yearShow = true">{{objName.year?objName.year:'请选择'}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">科目组：</text> <view class="select" @click="objShow.subjectShow = true">{{objName.subject?objName.subject:'请选择'}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">录取批次：</text> <view class="select" @click="objShow.batchShow = true">{{objName.batch_name?objName.batch_name:'请选择'}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">院校所在地：</text> <view class="select" @click="objShow.areaShow = true">{{objName.area_name?objName.area_name:'全国'}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">院校名称：</text> <view class="select"><u-input v-model="objName.schoo_title" type="tel" /></view></view>
				<view class="item"><text class="label">专业名称：</text> <view class="select"><u-input v-model="objName.major" type="tel" /></view></view>
				<view class="type-btn"><view @click="reset">重置</view><view @click="confirm">确定</view></view>
			</view>
		</u-popup>
		
		<u-select v-model="objShow.yearShow" :list="objList.yearList" @confirm="confirm1"></u-select>
		<u-select v-model="objShow.subjectShow" :list="objList.subjectList" @confirm="confirm2"></u-select>
		<u-select v-model="objShow.batchShow" :list="objList.batchList" @confirm="confirm3"></u-select>
		<u-select v-model="objShow.areaShow" :list="objList.areaLis" @confirm="confirm4"></u-select>
	</view>
</template>

<script>
	import sibList from '@/components/sib-list/sib-list.vue'
	export default {
		components: {
		    sibList
		},
		data() {
			return {
				sList: [],
				sShow: false,
				listObj :{
					is_condition: 1,
					year: '',
					batch_type: '',
					subject_type: '',
					school_province_code: '',
					school_title: '',
					page: 1
				},
				objCopy:{},
				objName: {
					year: '',
					subject: '',
					subject_type: '',
					batch_name: '',
					batch_type: '',
					area_name: '',
					area_type: '',
					schoo_title: '',
					major: ''
				},
				objShow: {
					yearShow: false,
					subjectShow: false,
					batchShow: false,
					areaShow: false,
				},
				objList: {
					yearList: [],
					subjectList: [],
					batchList: [],
					areaList: []
				},
				sShow: false,
				condition: ''
			}
		},
		onLoad(option) {
			uni.showLoading({
			    title: '加载中...',
			    mask: true
			})
			console.log(option.school_title)
			if(option.school_title) {
				this.listObj = {
					is_condition: 1,
					year: '',
					batch_type: '',
					subject_type: '',
					school_province_code: 0,
					school_title: option.school_title,
					enroll_major_title: '',
					page: 1
				}
			}
			this.getList('first');
		},
		methods: {
			goto(name, item) {
				uni.navigateTo({
					url: name+"?school_code="+item.school_code
				});
			},
			// 重置
			reset() {
				if(this.condition) {
					for (let s of this.condition.enrollYearList) {
						this.objList.yearList.push({value: s, label:s});
					}
					this.objName.year = this.condition.enrollYearList[0];
					
					for (let s of this.condition.subjectTypeList) {
						this.objList.subjectList.push({value:s.type, label:s.name})
					}
					
					for (let s of this.condition.areaRegionList) {
						this.objList.areaList.push({value:s.province_code, label:s.province_str})
					}
					// 总分判断是哪个档次
					let userInfo = uni.getStorageSync('userInfo');
					let allNum = userInfo.chinese + userInfo.english + userInfo.math + userInfo.synthesize;
					let type = 1;
					if(userInfo.subject_type == 2) {
						if(allNum>=500) {
							type = 3
						}else if(allNum>=381 && allNum<500) {
							type = 1
						}else if(allNum<381) {
							type = 5
						}
					}else if(userInfo.subject_type == 1) {
						if(allNum>=496) {
							type = 3
						}else if(allNum>=353 && allNum<496) {
							type = 1
						}else if(allNum<353) {
							type = 5
						}
					}
					for (let s of this.condition.batchTypeList) {
						this.objList.batchList.push({value:s.type, label:s.name})
						if(s.type == type) {
							this.objName.batch_type = s.type;
							this.objName.batch_name = s.name;
						}
					}
				}
			},
			confirm() {
				this.listObj = {
					is_condition: 0,
					year: this.objName.year,
					batch_type: this.objName.batch_type,
					subject_type: this.objName.subject,
					school_province_code: 0,
					school_title: this.objName.schoo_title,
					enroll_major_title: this.objName.major,
					page: 1
				}
				this.getList('second');
			},
			confirm1(e) {
				this.objName.year = e[0].value;
			},
			confirm2(e) {
				this.objName.subject = e[0].label;
				this.objName.subject_type = e[0].value;
			},
			confirm3(e) {
				this.objName.batch_type = e[0].value;
				this.objName.batch_name = e[0].label;
			},
			confirm4(e) {
				this.objName.area_type = e[0].value;
				this.objName.area_name = e[0].label;
			},
			getList(type) {
				this.http({
					url: `api/v1/enroll_plan/list`,
					method: 'GET',
					data: this.listObj,
					success: res => {
						this.sShow = false;
						if(res.errcode == 0) {
							uni.hideLoading()
							if(type == 'first' || type == 'second') {
								console.log(111)
								this.sList = res.result.list;
								this.listObj.page = 2;
								this.getList();
							}else {
								for (let s of res.result.list) {
									this.sList.push(s)
								}
							}
							if(type == 'first') {
								this.condition = res.result;
								this.reset();
							}
						}
					},
				})
			},
			// 刷新touch监听
			touchstart: function(e) {
			    this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
			    this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
			    this.$refs.sibList.refreshEnd(e);
			},
			scrolltolowerFn: function() {
			    uni.showLoading({
			        title: '加载中...',
			        mask: true
			    })
				this.listObj.page++;
				this.getList();
			},
		}
	}
</script>

<style lang="less" scoped>
	.search-table {
		.search-href {
			color: #3a81ff;
			width: 260rpx;
		}
		.search-th {
			width: 260rpx;
		}
		.table {
			width: 1800rpx;
			overflow-x: a;
		}
	}
	.sx-content {
		background-color: #FFFFFF;
		height: 60rpx;
		position: relative;
		z-index: 11;
		margin-bottom: -10rpx;
		.sx-btn {
			float: right;
			border-radius: 100rpx;
			background-color: #00CA8A;
			color: #FFFFFF;
			padding: 4rpx 20rpx;
			margin: 6rpx 20rpx 6rpx 0;
			position: relative;
			z-index: 1;
		}
	}
	.search-type {
		padding: 50rpx;
		.item {
			margin-bottom: 20rpx;
		}
		.select {
			display: inline-block;
			border: 1px solid #999999;
			border-radius: 8rpx;
			width: 306rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 10rpx;
			color: #999;
		}
		.label {
			width: 180rpx;
			display: inline-block;
		}
		.down {
			float: right;
			margin-top: 20rpx;
		}
		.type-btn {
			width: 80%;
			margin-left: 10%;
			view {
				width: calc(50% - 10rpx);
				display: inline-block;
				line-height: 70rpx;
				border-radius: 8rpx;
				text-align: center;
				border: 1px solid #c1c1c1;
			}
			view:last-child {
				margin-left: 20rpx;
				background-color: #00CA8A;
				border: 1px solid #00CA8A;
				color: #FFFFFF;
			}
		}
	}
	.table-scroll {
		width: 100%;
		overflow-x: scroll;
	}
</style>